<template>
  <div>
    <h3>管理员登录</h3>
    <table class="table table-bordered">
      <tr>
        <td>账号</td>
        <td><input type="text" v-model="queryInfo.userName" /></td>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="password" v-model="queryInfo.userPwd" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" @click="Login" value="登录" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue';

    //1.安装npm i axios 2.导入
    import axios from 'axios';
    //Vue-router:作用实现页面跳转
    import { useRouter } from 'vue-router';
    //router 作用 可以实现页面跳转并且传值
    const router = useRouter();

    //数据
    let queryInfo = reactive({
        userName:'',
        userPwd:''
    });

    //登录
    const Login = () =>{
        //1.非空验证+有效性验证
        if(queryInfo.userName == ''){
            alert('姓名不可为空');
            return;
        }

        if(queryInfo.userPwd == ''){
            alert('密码不可为空');
            return;
        }

        //2.发送网络请求 使用
        axios({
            url:'https://localhost:7142/api/Admin/Login',//向后端发送网络请求的地址
            method:'get', //请求方式
            params:{
                name:queryInfo.userName,
                pwd:queryInfo.userPwd,
            },
        })
        .then((res)=>{
            console.log(res);
            if(res.data == -1){
                alert('账号不存在或密码错误');
                return;
            }
            if(res.data == -2){
                alert('密码错误');
                return;
            }
            alert('登录成功');
            //登录成功 1.储存用户信息 2.跳转到会员页面
            router.push('/memberAdd');
            //location.href = '/src/views/menber/memberAdd.vue'

        })
        .catch((err)=>{
            console.log(err);
        })
    }
</script>

<style scoped></style>
